<template>
  <div class="media-viewer__box">
    <div class="media-viewer__wrap">
      <div class="media-loading__mask"></div>
      <div class="media-viewer">
        <div
          ref="vjs-custom"
          class="video-player vjs-custom-skin vjs-edit-skin custom-player-skin control-bar-outline hide-edit-position"
        >
          <video ref="video" class="video-js"></video>
          <div class="vjs-edit-postion">
            <div title="入点" class="position-in">
              I {{ that.videoJsSecondToFrame(that.inPosition) }}
            </div>
            <div title="出点" class="position-out">
              O {{ that.videoJsSecondToFrame(that.outPosition) }}
            </div>
            <div title="长度" class="position-dur">
              D {{ that.videoJsSecondToFrame(that.durPosition) }}
            </div>
          </div>
          <DsSlider
            ref="sdSlider"
            :value="that.per"
            :inPosition="that.sliderInPostion"
            :outPosition="that.sliderOutPostion"
            :inPositionSlide="that.inPosition"
            :outPositionSlide="that.outPosition"
            :playerDuration="that.playerDuration"
            @updatePos="that.updatePos"
            @updateInPosition="that.updateInPosition"
            @updateOutPosition="that.updateOutPosition"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.media-viewer__box {
  position: relative;
  box-sizing: content-box;
  height: 424.5px;
  width: 600px;
  margin: 0 auto;
  &:first-child {
    margin-top: auto;
  }
  &:last-child {
    margin-bottom: auto;
  }
  .media-viewer__wrap {
    max-width: 100%;
    margin-bottom: 10px;
    border-radius: 5px;
    background: #f4f5f7;
    align-self: flex-start;
    position: relative;
    box-sizing: content-box;
    width: 100%;
    height: 0;
    overflow: hidden;
    //height: 100%;
    padding-top: 56.25%;
    padding-bottom: 87px;
    .media-loading__mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #333;
      z-index: 200;
      border-radius: 5px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      font-size: 14px;
      color: #fff;
      display: none;
    }
    .media-viewer {
      position: absolute;
      display: flex;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
      align-items: center;
      justify-content: space-around;
      background: #333;
      overflow: hidden;
      z-index: 100;
      border-radius: 5px;
      .vjs-edit-skin {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        box-sizing: content-box;
      }
    }
  }
}
</style>
<style lang="scss">
.vjs-custom-skin {
  .video-js {
    width: 100%;
    height: 100%;
    font-family: PingFang SC, Helvetica Neue, Hiragino Sans GB, Segoe UI, Microsoft YaHei,
      \\5fae\8f6f\96c5\9ed1, sans-serif;
    // z-index: 1;
    .vjs-tech {
      position: relative;
      top: 44px;
      left: auto;
      height: calc(100% - 87px) !important;
    }
    .vjs-big-play-button {
      top: 50%;
      left: 50%;
      margin-left: -1em;
      margin-top: -1em;
      background-color: rgba(0, 0, 0, 0.45);
      font-size: 3.5em;
      border-radius: 50%;
      height: 2em !important;
      width: 2em !important;
      line-height: 2em !important;
      margin-top: -1em !important;
    }
    &:hover {
      .vjs-big-play-button,
      .vjs-loading-spinner {
        background-color: rgba(36, 131, 213, 0.9);
      }
    }

    &.vjs-ended .vjs-big-play-button,
    &.vjs-paused .vjs-big-play-button {
      display: block;
    }
    .vjs-control-bar {
      display: flex;
      opacity: 1 !important;
      // font-size: 12px;
      color: white;
      height: 33px;
      background: rgba(44, 44, 44, 0.9);
      z-index: 101;
      visibility: visible;
      transition: visibility 0.1s, opacity 0.1s;
      .vjs-picture-in-picture-control {
        display: none;
      }
      .vjs-control {
        width: 33px !important;
        height: 33px !important;
        line-height: 33px !important;
        z-index: 101;
        &.video-menu-button {
          width: auto !important;
          margin-left: 4px;
          font-size: 12px;
          position: relative;
          .vjs-icon-placeholder {
            display: none !important;
          }
          .vjs-control-text {
            height: 100%;
            width: auto;
            position: relative;
          }
          .vjs-menu {
            width: 4rem;
            left: -1em;
            margin-bottom: 33px;
            .vjs-menu-content {
              bottom: 0;
            }
          }
        }
        &.vjs-icon-previous {
          .vjs-icon-placeholder {
            background-image: url(../../../assets/image/video/previous.png);
          }
        }
        &.vjs-icon-next {
          .vjs-icon-placeholder {
            background-image: url(../../../assets/image/video/next.png);
          }
        }
        &.vjs-icon-capture {
          .vjs-icon-placeholder {
            background-image: url(../../../assets/image/video/capture.png);
          }
        }
        &.vjs-icon-inpos {
          .vjs-icon-placeholder {
            background-image: url(../../../assets/image/video/inpos.png);
          }
        }
        &.vjs-icon-outpos {
          .vjs-icon-placeholder {
            background-image: url(../../../assets/image/video/outpos.png);
          }
        }
        &.vjs-icon-posok {
          .vjs-icon-placeholder {
            background-image: url(../../../assets/image/video/posok.png);
          }
        }
        &.vjs-icon-poscancel {
          .vjs-icon-placeholder {
            background-image: url(../../../assets/image/video/poscancel.png);
          }
        }
        &.vjs-icon-output {
          .vjs-icon-placeholder {
            background-image: url(../../../assets/image/video/output.png);
          }
        }

        &.vjs-icon-fullscreen {
          .vjs-icon-placeholder {
            background-image: url(../../../assets/image/video/fullscreen.png);
          }
        }
        &.vjs-icon-exitfullscreen {
          .vjs-icon-placeholder {
            background-image: url(../../../assets/image/video/exitfullscreen.png);
          }
        }
        &.vjs-icon-push-bill {
          .vjs-icon-placeholder {
            background-image: url(../../../assets/image/video/bill.png);
          }
        }
        &.vjs-icon-fullscreen,
        &.vjs-icon-poscancel {
          .vjs-icon-placeholder {
            background-size: 18px;
          }
        }
      }
      .vjs-icon-placeholder {
        // display: inline-block;
        width: 33px !important;
        height: 33px !important;
        background-repeat: no-repeat;
        background-position: 50%;
        &::before {
          font-size: 20px !important;
        }
      }
      .vjs-time-control {
        min-width: 1em;
        padding: 0;
        margin: 0 0.1em;
        text-align: center;
        display: block;
        order: 1;
      }
      .vjs-time-divider {
        line-height: 33px;
      }
      .vjs-icon-myduration,
      .vjs-icon-mycurrent {
        width: auto !important;
        font-size: 12px;
      }
      //当前播放时长
      .vjs-icon-mycurrent {
        order: 0;
        cursor: pointer;
      }
      //总时长
      .vjs-icon-myduration {
        order: 2;
        cursor: pointer;
      }
      //倍数
      .video-menu-button {
        order: 3;
        cursor: pointer;
      }
      //播放/暂停
      .vjs-icon-space {
        order: 4;
        cursor: pointer;
        flex-grow: 1;
      }
      //上一帧
      .vjs-icon-previous {
        order: 5;
        cursor: pointer;
      }
      //下一帧
      .vjs-icon-next {
        order: 6;
        cursor: pointer;
      }
      //标记点
      .vjs-icon-capture {
        order: 7;
        cursor: pointer;
      }
      //标记入点
      .vjs-icon-inpos {
        order: 8;
        cursor: pointer;
      }
      //标记出点
      .vjs-icon-outpos {
        order: 9;
        cursor: pointer;
      }
      //确定标记段
      .vjs-icon-posok {
        order: 10;
        cursor: pointer;
      }
      .vjs-icon-push-bill {
        order: 11;
        cursor: pointer;
      }
      //取消标记段
      .vjs-icon-poscancel {
        order: 12;
        cursor: pointer;
      }
      //媒体库
      .vjs-icon-media-library {
        order: 13;
        cursor: pointer;
      }
      //待选列表
      .vjs-icon-waiting {
        order: 14;
        cursor: pointer;
      }
      //时间线
      .vjs-icon-timeline {
        order: 15;
        cursor: pointer;
      }
      //下载
      .vjs-icon-download {
        order: 16;
        cursor: pointer;
      }
      //推送标记段
      .vjs-icon-output {
        order: 17;
        cursor: pointer;
      }
      //音量
      .vjs-volume-panel-vertical {
        order: 18;
        cursor: pointer;
        .vjs-volume-vertical {
          height: 8em !important;
          margin-right: 0;
          left: -2.5em;
          .vjs-volume-level {
            background-color: #2483d5;
            &::before {
              top: 0;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }
        }
      }
      //全屏
      .vjs-icon-fullscreen {
        order: 19;
        cursor: pointer;
      }
    }
  }
  .vjs-paused.vjs-has-started {
    .vjs-big-play-button {
      display: block;
    }
  }
  .vjs-edit-postion {
    position: absolute;
    left: 0;
    top: 0;
    height: 42px;
    width: 100%;
    background: rgba(41, 41, 41, 0.5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 3;
    .position-in {
      margin-left: 20px;
      color: #fff;
    }
    .position-dur {
      margin-right: 20px;
      color: #fff;
    }
    .position-out {
      color: #fff;
    }
  }
}
</style>
<script lang="ts" setup>
// https://blog.csdn.net/snowflakelm/article/details/125245546
import {
  reactive,
  onMounted,
  nextTick,
  getCurrentInstance,
  onBeforeUnmount,
  computed,
} from "vue";
import videojs from "video.js";
import "video.js/dist/video-js.css"; //videojs样式
import video_zhCN from "video.js/dist/lang/zh-CN.json";
import "videojs-contrib-hls"; // 用来播放hls流
import "@videojs/http-streaming";
videojs.addLanguage("zh-CN", video_zhCN);
import { message } from "ant-design-vue";
import DsSlider from "./DsSlider.vue";
import { getFomatTime, stringToObject } from "@/utils/utils";

const { proxy }: any = getCurrentInstance();

const props: any = defineProps({
  start: {
    type: Number,
    default: 0,
  },
  playsinline: {
    type: Boolean,
    default: false,
  },
  //帧率
  fps: {
    type: Number,
    default: 25,
  },
  customEventName: {
    type: String,
    default: "statechanged",
  },
  options: {
    type: Object,
    required: true,
  },
  events: {
    type: Array,
    default: () => {
      return [];
    },
  },
  globalOptions: {
    type: Object,
    default: () => {
      return {
        language: "zh-CN",
        loop: false,
        crossOrigin: "Anonymous",
        autoplay: true,
        controls: true,
        preload: "auto",
        fluid: false, // 扩展以适应其容器的大小
        muted: false,
        controlBar: {
          remainingTimeDisplay: false,
          playToggle: {},
          progressControl: {},
          fullscreenToggle: {},
          volumePanel: {
            inline: false,
            vertical: true,
          },
          liveDisplay: true,
        },
        techOrder: ["html5"],
        plugins: {},
      };
    },
  },
  globalEvents: {
    type: Array,
    default: () => {
      return [];
    },
  },
  trackList: {
    type: Array,
    default: () => {
      return [];
    },
  },
});
const emit = defineEmits([
  "capture",
  "segmentOk",
  "segmentCanel",
  "output",
  "outputTimeline",
  "outputMedia",
  "outputWait",
  "download",
  "pushIntoBill",
  "timeupdate",
  "ready",
  "statechanged",
]);
const that: any = reactive({
  player: null,
  reseted: true,
  crossOrigin: "anonymous",
  base64: "",
  inPosition: null,
  outPosition: null,
  playerCurrenttime: 0,
  playerDuration: 0,
  per: 0,
  btnMyCurrent: null,
  btnMyDuration: null,
  btnFullScreen: null,
  pictureMark: null,
  //保存当前播放视频截图
  captureImage: () => {
    if (that.player) {
      const video: any = proxy.$refs["vjs-custom"].querySelector("video");
      const canvas: any = document.createElement("canvas");
      canvas.width = that.player.videoWidth();
      canvas.height = that.player.videoHeight();
      canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
      let imgBase64: string = canvas.toDataURL();
      return imgBase64;
      // console.error("播放器还没有加载完成");
    }
  },
  currentTime: () => {
    return that.player.currentTime();
  },
  //取消标注
  clearSegment: () => {
    that.inPosition = null;
    that.outPosition = null;
    that.base64 = "";
  },
  updateTimeline: (time: any) => {
    that.playerCurrenttime = time;
    that.per = (that.playerCurrenttime / that.playerDuration) * 100;
  },
  //拖动进度条回显位置信息
  updatePos: (per: any = 0) => {
    that.player.pause(); //暂停播放
    per = (per / 100) * that.playerDuration;
    that.player.currentTime(per);
  },
  //当前播放时间
  addmyCurrent: () => {
    let obj: any = that.player.controlBar.addChild("TimeDisplay");
    obj.addClass("vjs-icon-mycurrent");
    obj.addClass("player-icon");
    that.btnMyCurrent = obj;
  },
  //视频总时长
  addmyDuration: () => {
    let obj: any = that.player.controlBar.addChild("TimeDisplay");
    obj.addClass("vjs-icon-myduration");
    obj.addClass("player-icon");
    that.btnMyDuration = obj;
  },
  // 播放/暂停
  addSpace: () => {
    let obj: any = that.player.controlBar.addChild("button");
    obj.addClass("vjs-icon-space");
    obj.addClass("player-icon");
  },
  //初始化倍数
  addPlaybackRate: () => {
    const rate: any = ["3.0x", "2.0x", "1.5x", "1.0x", "0.5x"];
    const MenuButton: any = videojs.getComponent("MenuButton"),
      Menu: any = videojs.getComponent("Menu"),
      MenuItem: any = videojs.getComponent("MenuItem");
    const myMenu: any = new Menu(that.player);
    const myMenuButton = new MenuButton(that.player);
    const myMenuItemList: any = [];
    for (let i = 0; i < rate.length; i++) {
      myMenuItemList.push(new MenuItem(that.player, { label: rate[i] }));
      myMenuItemList[i].on("click", ($event: any) => {
        that.handleSetPlaybackRate($event);
      });
      myMenu.addItem(myMenuItemList[i]);
    }
    myMenuButton.addChild(myMenu);
    myMenuButton.controlText("倍数");
    that.player.controlBar.addChild(myMenuButton, {}).addClass("video-menu-button");
    that.player.speedMenuItemList = myMenuItemList;
    that.player.speedMenuButton = myMenuButton;
  },
  //设置倍数
  handleSetPlaybackRate: (event: any) => {
    const rate: any = event ? event.target.innerText : "1.0x";
    let floats: any = parseFloat(rate);
    that.player.speedMenuButton.el().querySelector(".vjs-control-text").innerHTML = rate;
    that.player.playbackRate(floats);
    that.player.speedMenuItemList.forEach((item: any) => {
      item.toggleClass("vjs-selected", item.options_.label === rate);
    });
  },
  //上一帧
  addPrevious: () => {
    let obj: any = that.player.controlBar.addChild("button");
    obj.setAttribute("title", "上一帧");
    obj.addClass("vjs-icon-previous");
    obj.addClass("player-icon");
    obj.on("click", () => {
      that.player.pause();
      that.player.currentTime(that.player.currentTime() - 1 / props.fps);
    });
  },
  //下一帧
  addNext: () => {
    let obj: any = that.player.controlBar.addChild("button");
    obj.setAttribute("title", "下一帧");
    obj.addClass("vjs-icon-next");
    obj.addClass("player-icon");
    obj.on("click", () => {
      that.player.pause();
      that.player.currentTime(that.player.currentTime() + 1 / props.fps);
    });
  },
  //标记点
  addCapture: () => {
    let obj: any = that.player.controlBar.addChild("button");
    obj.setAttribute("title", "标记点");
    obj.addClass("vjs-icon-capture");
    obj.addClass("player-icon");
    obj.on("click", () => {
      that.player.pause();
      let base64: string = that.captureImage();
      let time: any = that.player.currentTime();
      that.inPosition = time;
      that.outPosition = time;
      emit("capture", { pos: time, base64: base64 }); //向父组件返回数据
    });
  },
  //标记入点
  addInPos: () => {
    let obj: any = that.player.controlBar.addChild("button");
    obj.setAttribute("title", "标记入点");
    obj.addClass("vjs-icon-inpos");
    obj.addClass("player-icon");
    obj.on("click", () => {
      that.player.pause();
      that.base64 = that.captureImage();
      that.inPosition = that.player.currentTime();
      if (that.outPosition < that.inPosition) {
        that.outPosition = that.inPosition;
      }
    });
  },
  //标记出点
  addOutPos: () => {
    let obj: any = that.player.controlBar.addChild("button");
    obj.setAttribute("title", "标记出点");
    obj.addClass("vjs-icon-outpos");
    obj.addClass("player-icon");
    obj.on("click", () => {
      that.player.pause();
      that.outPosition = that.player.currentTime();
      if (that.outPosition < that.inPosition) {
        that.inPosition = that.outPosition;
        that.base64 = that.captureImage();
      }
    });
  },
  //确定标记段
  addPosOk: () => {
    let obj: any = that.player.controlBar.addChild("button");
    obj.setAttribute("title", "确定标记段");
    obj.addClass("vjs-icon-posok");
    obj.addClass("player-icon");
    obj.on("click", () => {
      emit("segmentOk", {
        in: that.inPosition,
        out: that.outPosition,
        base64: that.base64,
      });
    });
  },
  //取消标记段
  addPosCanel: () => {
    let obj: any = that.player.controlBar.addChild("button");
    obj.setAttribute("title", "取消标记段");
    obj.addClass("vjs-icon-poscancel");
    obj.addClass("player-icon");
    obj.on("click", () => {
      that.clearSegment();
      emit("segmentCanel");
    });
  },
  //推送标记段
  addOutput: () => {
    let obj: any = that.player.controlBar.addChild("button");
    obj.setAttribute("title", "推送标记段");
    obj.addClass("vjs-icon-output");
    obj.addClass("player-icon");
    obj.on("click", () => {
      const inPosition: any = that.inPosition || 0;
      const outPosition: any = that.outPosition || 0;
      const base64: any = that.base64;
      if (inPosition === outPosition) {
        message.warning("请选择一个片段");
        return false;
      }
      emit("output", {
        in: that.videoJsSecondToFrame(inPosition),
        out: that.videoJsSecondToFrame(outPosition),
        base64,
      });
    });
  },
  //时间线
  addTimeline: () => {
    let obj: any = that.player.controlBar.addChild("button");
    obj.setAttribute("title", "时间线");
    obj.addClass("vjs-icon-timeline");
    obj.addClass("player-icon");
    obj.on("click", () => {
      emit("outputTimeline", {
        in: 1000 * that.inPosition,
        out: 1000 * that.outPosition,
      });
    });
  },
  //媒体库
  addMediaLibrary: () => {
    let obj: any = that.player.controlBar.addChild("button");
    obj.setAttribute("title", "媒体库");
    obj.addClass("vjs-icon-media-library");
    obj.addClass("player-icon");
    obj.on("click", () => {
      emit("outputMedia", {
        in: 1000 * that.inPosition,
        out: 1000 * that.outPosition,
      });
    });
  },
  //待选列表
  addWaitingLibrary: () => {
    let obj: any = that.player.controlBar.addChild("button");
    obj.setAttribute("title", "待选列表");
    obj.addClass("vjs-icon-waiting");
    obj.addClass("player-icon");
    obj.on("click", () => {
      emit("outputWait", {
        in: 1000 * that.inPosition,
        out: 1000 * that.outPosition,
      });
    });
  },
  //下载
  addDownload: () => {
    let obj: any = that.player.controlBar.addChild("button");
    obj.setAttribute("title", "下载");
    obj.addClass("vjs-icon-download");
    obj.addClass("player-icon");
    obj.on("click", () => {
      emit("download", {
        in: 1000 * that.inPosition,
        out: 1000 * that.outPosition,
      });
    });
  },
  //全屏
  addFullscreen: () => {
    let obj: any = that.player.controlBar.addChild("button");
    obj.setAttribute("title", "全屏");
    obj.addClass("vjs-icon-fullscreen");
    obj.addClass("player-icon");
    that.btnFullScreen = obj;
    obj.on("click", () => {
      if (!isFullScreen()) {
        obj.setAttribute("title", "退出全屏");
        obj.addClass("vjs-icon-exitfullscreen");
        that.player.requestFullscreen();
      } else {
        obj.setAttribute("title", "全屏");
        obj.removeClass("vjs-icon-exitfullscreen");
        that.player.exitFullscreen();
      }
    });
  },
  //片段加入素材单
  handlePlayerBillPush: () => {
    let obj: any = that.player.controlBar.addChild("button");
    obj.setAttribute("title", "片段加入素材单");
    obj.addClass("vjs-icon-push-bill");
    obj.addClass("player-icon");
    obj.on("click", () => {
      const inPosition: any = that.inPosition || 0;
      const outPosition: any = that.outPosition || 0;
      const base64: any = that.base64;
      if (inPosition === outPosition) {
        message.warning("请选择一个片段");
        return false;
      }
      emit("pushIntoBill", {
        in: 1000 * inPosition,
        out: 1000 * outPosition,
        startPosition: 1000 * that.sliderInPostion * 1000,
        stopPosition: 1000 * that.sliderOutPostion * 1000,
        base64: base64,
      });
    });
  },
  //设置播放时间格式化时间
  videoJsSecondToFrame: (time: any = 0, t: any = 0) => {
    return getFomatTime(time, props.fps);
  },
  //更新标记点入口位置
  updateInPosition: (datas: any = {}) => {
    that.player.pause();
    that.player.currentTime(datas.inPositionSlide);
  },
  //更新标记点出口位置
  updateOutPosition: (datas: any = {}) => {
    that.player.pause();
    that.player.currentTime(datas.outPositionSlide);
  },
});
const isFullScreen = () => {
  return document.isFullScreen || document.mozIsFullScreen || document.webkitIsFullScreen;
};
//初始化配置
const initOptions = (data: any = {}) => {
  let obj: any = Object.assign({}, data),
    src: string = "";
  if (obj.src && obj.src.length > 0) {
    src = obj.src;
    delete obj.src; //删除
  }
  //判断是否是.m3u8文件
  if (src.endsWith(".m3u8")) {
    obj.sources = [
      {
        type: "application/x-mpegURL",
        src: src,
      },
    ];
  } else if (src.endsWith(".flv")) {
    obj.techOrder = ["html5", "flvjs"];
    obj.flvjs = {
      mediaDataSource: {
        isLive: true,
        cors: true,
        withCredentials: false,
      },
    };
    obj.flash = {
      params: {
        wmode: "Opaque",
      },
      swf: "/share/static/videojs/video-js.swf",
    };
    obj.sources = [
      {
        type: "video/x-flv",
        src: src,
      },
    ];
  } else if (src.startsWith("rtmp://")) {
    obj.techOrder = ["html5", "flash"];
    obj.flash = {
      params: {
        wmode: "Opaque",
      },
      swf: "/share/static/videojs/video-js.swf",
    };
    obj.sources = [
      {
        type: "rtmp/mp4",
        src: obj.obj,
      },
    ];
  } else if (src.endsWith(".mp3")) {
    obj.sources = [
      {
        type: "audio/mp3",
        src: src,
      },
    ];
  } else if (src.endsWith(".wav")) {
    obj.sources = [
      {
        type: "audio/wav",
        src: src,
      },
    ];
  } else {
    obj.sources = [
      {
        type: "video/mp4",
        src: src,
      },
    ];
  }
  return obj;
};
//初始化
const initialize = () => {
  const options: any = initOptions(props.options);
  const globalOptions: any = Object.assign({}, props.globalOptions, options);
  if ("edit" === props.options.mode) {
    globalOptions.controlBar = {
      currentTimeDisplay: false,
      timeDivider: true,
      durationDisplay: false,
      remainingTimeDisplay: false,
      playToggle: {},
      progressControl: false,
      fullscreenToggle: false,
      volumePanel: {
        inline: false,
        vertical: true,
      },
    };
  }
  //设置播放时间格式化时间
  videojs.setFormatTime(that.videoJsSecondToFrame);
  if (props.playsinline) {
    proxy.$refs.video.setAttribute("playsinline", props.playsinline);
    proxy.$refs.video.setAttribute("webkit-playsinline", props.playsinline);
    proxy.$refs.video.setAttribute("x5-playsinline", props.playsinline);
    proxy.$refs.video.setAttribute("x5-video-player-type", "h5");
    proxy.$refs.video.setAttribute("x5-video-player-fullscreen", false);
  }

  if ("" !== that.crossOrigin) {
    proxy.$refs.video.crossOrigin = that.crossOrigin;
    proxy.$refs.video.setAttribute("crossOrigin", that.crossOrigin);
  }

  // avoid error "VIDEOJS: ERROR: Unable to find plugin: __ob__"
  if (globalOptions.plugins) {
    delete globalOptions.plugins.__ob__;
  }
  //实时更新播放速度
  const fn: any = (obj: any, time: any) => {
    if (obj) {
      emit(obj, that.player);
    }
    if (time) {
      emit(props.customEventName, stringToObject({}, obj, time));
    }
  };
  that.player = videojs(proxy.$refs.video, globalOptions, () => {
    that.player.on("loadedmetadata", (obj: any) => {
      that.playerDuration = that.player.duration(); //获取时长
      if ("edit" === props.options.mode) {
        //转化时间
        that.btnMyCurrent.updateTextNode_(that.player.currentTime());
        that.btnMyDuration.updateTextNode_(that.player.duration());
      }
    });
    that.player.on("timeupdate", (obj: any) => {
      that.updateTimeline(that.player.currentTime());
      fn("timeupdate", that.player.currentTime()); //更新进度条
      if ("edit" === props.options.mode) {
        //转化时间
        that.btnMyCurrent.updateTextNode_(that.player.currentTime());
        that.btnMyDuration.updateTextNode_(that.player.duration());
      }
      //判断是否播放完成，完成暂停视频播放操作
      if (
        that.inPosition !== null &&
        0 <= that.inPosition &&
        that.outPosition !== null &&
        0 <= that.outPosition &&
        that.inPosition !== that.outPosition &&
        !that.player.paused() &&
        that.currentTime() >= that.outPosition
      ) {
        //paused 是否已暂停
        that.player.pause();
        that.player.currentTime(that.inPosition);
      }
    });
    that.player.on("play", () => {
      that.pictureMark && (that.pictureMark.style.display = "none");
    });
    that.player.on("seeked", () => {
      that.pictureMark && (that.pictureMark.style.display = "none");
    });
    addBtns(options);
    emit("ready", that);
  });
  if (proxy.$refs.sdSlider != undefined) {
    proxy.$refs.sdSlider.initData();
  }
};

/**
 * 添加底部音频按钮
 * @param obj
 */
const addBtns = (obj: any) => {
  let arr: any = {};
  if ("edit" === obj.mode) {
    //obj.editBtns ||
    obj.editBtns = [
      "current",
      "duration",
      "space",
      "playbackRate",
      "prev",
      "next",
      "capture",
      "inposition",
      "outposition",
      "outputStage",
      "clearStage",
      "pushBill",
      "pushStage",
      "fullscreen",
    ];
    arr = {
      current: () => {
        return that.addmyCurrent();
      },
      duration: () => {
        return that.addmyDuration();
      },
      space: () => {
        return that.addSpace();
      },
      playbackRate: () => {
        return that.addPlaybackRate();
      },
      prev: () => {
        return that.addPrevious();
      },
      next: () => {
        return that.addNext();
      },
      capture: () => {
        return that.addCapture();
      },
      inposition: () => {
        return that.addInPos();
      },
      outposition: () => {
        return that.addOutPos();
      },
      outputStage: () => {
        return that.addPosOk();
      },
      clearStage: () => {
        return that.addPosCanel();
      },
      pushStage: () => {
        return that.addOutput();
      },
      fullscreen: () => {
        return that.addFullscreen();
      },
      timeline: () => {
        return that.addTimeline();
      },
      waiting: () => {
        return that.addWaitingLibrary();
      },
      media: () => {
        return that.addMediaLibrary();
      },
      download: () => {
        return that.addDownload();
      },
      pushBill: () => {
        return that.handlePlayerBillPush();
      },
    };
    obj.editBtns.forEach((item: any) => {
      arr[item]();
    });
  } else {
    if (obj.capture) {
      that.addCapture();
    }
  }
};
//计算两个标记点时间
that.durPosition = computed(() => {
  return that.outPosition > that.inPosition ? that.outPosition - that.inPosition : 0;
});
//计算标记入点时间
that.sliderInPostion = computed(() => {
  return 0 <= that.inPosition && 0 < that.playerDuration
    ? (that.inPosition / that.playerDuration) * 100
    : null;
});
//计算标记出点时间
that.sliderOutPostion = computed(() => {
  return 0 <= that.outPosition && 0 < that.playerDuration
    ? (that.outPosition / that.playerDuration) * 100
    : null;
});
onMounted(() => {
  nextTick(() => {
    if (that.player == null) {
      initialize();
    }
  });
});
onBeforeUnmount(() => {
  //销毁
  if (that.player) {
    that.player.dispose();
  }
});
</script>
